<template>
  <!-- 机构作业范围 -->
  <el-row class="main" :gutter="20">
    <!-- 左侧树形结构 -->
    <el-col :span="4">
      <el-card class="tree_card">
        <el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick" />
      </el-card>
    </el-col>

    <el-col :span="20">
      <!-- 右侧内容 -->
      <el-card class="map_card">
        <el-row>
          <span>地区关键词：</span>
          <el-input />
        </el-row>
        <!-- 地图插件 -->
        <div id="map" style="height: 720px;" />
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
import { getBranchesTree } from '@/api/branches'
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  created() {
    this.getBranchesTree()
  },

  methods: {
    // 获取机构树
    async getBranchesTree() {
      this.treeData = JSON.parse(await getBranchesTree())
    },

    // 点击树节点
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input{
  width: 300px;
}

.main {
  padding-top: 24px;

  .tree_card{
    height: 800px;
    margin-bottom: 20px;
  }
}
</style>
